<template>
  <view class="function-section">
    <text class="function-title">常用功能</text>
    <view class="function-grid">
      <view
        class="function-item"
        v-for="(item, index) in frequentlyList"
        :key="index"
        @click="$goBack(item.path)"
      >
        <view class="icon-wrapper">
          <image class="function_img" :src="item.src1" mode="widthFix"></image>
          <text class="function-text">{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      frequentlyList: [
        {
          src1: "/static/index/server-root.png",
          label: "道路业户",
          path: "../msgQuery/index",
        },
        {
          src1: "/static/index/server-year.png",
          label: "年审申请",
        },

        {
          src1: "/static/index/server-card.png",
          label: "电子证照",
        },
        {
          src1: "/static/index/server-normal.png",
          label: "综合服务",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
// 常用服务
.function-section {
  margin-top: 20px;

  .function-title {
    font-size: 16px;
    font-weight: bold;
    color: #0d1444;
  }
  .function-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
    .function-item {
      display: flex;
      align-items: center;

      justify-content: start;
      width: 48%;
      height: 56px;
      background-color: #ebeef6;
      border-radius: 8px;
      margin-bottom: 10px;

      border: 1px dashed #ccc;

      /* 虚线边框样式 */
      .function_img {
        width: 40px;
        height: 40px;
      }
      .icon-wrapper {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        margin-left: 5px;
        box-sizing: border-box;
      }

      .function-text {
        font-size: 14px;
        color: #0d1444;
        margin-left: 5px;
      }
    }
  }
}
</style>
